<template>
  <div class="home">
    <Header
      :class="$route.meta.header == 'fixed' ? 'fixed-header' : ''"
    ></Header>
    <router-view
      :class="$route.meta.header == 'fixed' ? 'fixed-content' : ''"
    />
    <Footer v-show="$route.meta.footer != false"></Footer>
    <div
      v-show="showGroupCode"
      style="position: fixed; bottom: 396px; right: 250px; z-index: 99999"
    >
      <div>
        <div
          class="ant-popover ant-popover-placement-left ant-popover-hidden"
          style="transform-origin: 166px 50%; pointer-events: none"
        >
          <div class="ant-popover-content">
            <div class="ant-popover-arrow">
              <span class="ant-popover-arrow-content"></span>
            </div>
            <div class="ant-popover-inner" role="tooltip">
              <div class="ant-popover-inner-content">
                <img
                  width="120"
                  alt="报告群"
                  src="../assets/images/wechatGroup.png"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div
      v-show="showMini"
      style="position: fixed; bottom: 336px; right: 250px; z-index: 99999"
    >
      <div>
        <div
          class="ant-popover ant-popover-placement-left ant-popover-hidden"
          style="transform-origin: 166px 50%; pointer-events: none"
        >
          <div class="ant-popover-content">
            <div class="ant-popover-arrow">
              <span class="ant-popover-arrow-content"></span>
            </div>
            <div class="ant-popover-inner" role="tooltip">
              <div class="ant-popover-inner-content">
                <img
                  width="120"
                  alt="微信小程序"
                  src="../assets/images//mini-qrcode.jpg"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="tool">
      <div class="tool-item" @click="backtop">
        <img src="@/assets/images/v2/tool-top.png" alt="" />
        <div>回顶部</div>
      </div>
      <div
        class="tool-item"
        v-on:mouseover="showGroup()"
        v-on:mouseout="hideGroup()"
      >
        <img src="@/assets/images/v2/tool-group.png" alt="" />
        <div>交流群</div>
      </div>
      <div
        class="tool-item"
        v-on:mouseover="showMiniprogram()"
        v-on:mouseout="hideMiniprogram()"
      >
        <img src="@/assets/images/v2/tool-mini.png" alt="" />
        <div>小程序</div>
      </div>

      <div class="tool-item" v-show="showBar" @click="openVip">
        <img src="@/assets/images/v2/vip.png" alt="" />
        <div>开通会员</div>
      </div>

      <div class="tool-item" style="border-bottom: none" @click="backHome">
        <img src="@/assets/images/v2/tool-close.png" alt="" />
        <div>回首页</div>
      </div>
    </div>
  </div>
</template>

<script>
import Header from "@/components/header.vue";
import Footer from "@/components/footer.vue";

export default {
  name: "Home",
  components: { Header, Footer },
  data() {
    return {
      showWechat: false,
      showGroupCode: false,
      showBar: true,
      showMini: false,
    };
  },
  created() {},
  methods: {
    openVip() {
      this.$router.push({
        path: "/aboutVip",
      });
    },
    backHome() {
      this.$router.push({
        path: "/index",
      });
    },
    backtop() {
      window.scrollTo(0, 0);
    },

    showGroup() {
      this.showGroupCode = true;
    },
    hideGroup() {
      this.showGroupCode = false;
    },

    showMiniprogram() {
      this.showMini = true;
    },
    hideMiniprogram() {
      this.showMini = false;
    },
  },
};
</script>


<style lang="less" scoped>
.tool {
  position: fixed;
  bottom: 100px;
  right: 0;
  width: 60px;
  background: white;
  z-index: 9999;
  background: #ffffff;
  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.1);
  border-radius: 8px 0px 0px 8px;
}

.tool-item {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  flex-direction: column;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 12px;
  color: #3f4750;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #e9ebee;
  cursor: pointer;
  img {
    width: 20px;
    height: 20px;
  }
}

.tool-item:hover {
  background: #467dd0;
  color: white;
}

.home {
  width: 100%;
  overflow: hidden;
  background: #f3f5f7;
  overflow-x: hidden;
}
.fixed-content {
  padding-top: 54px;
}
.fixed-header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
}
.chatBtn {
  display: block;
  background-color: rgb(57, 130, 185);
  border-radius: 55px;
  right: 18px;
  bottom: 18px;
  width: 25px;
  height: 25px;
  padding: 15px;
  width: auto;
  height: auto;
  opacity: 0.8;
  min-width: 55px;
  min-height: 45px;
  padding: 5px 0 !important;
  border-radius: 4px !important;
  background-color: #2676d3 !important;
  position: fixed;
  background-color: #19caa6;
  font-family: "Helvetica Neue", Helvetica, "Microsoft Yahei", Arial, sans-serif;
  font-size: 8px;
  line-height: 24px;
  bottom: -42px;
  color: #fff;
  text-align: center;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  cursor: pointer;
  z-index: 2147483645;
  width: auto;
  box-sizing: content-box !important;
}

.style_pops__2Z7BJ {
  right: 20px;
  z-index: 9;
  bottom: 10px;
  position: fixed;
}

.style_pops__2Z7BJ > * {
  color: #fff;
  width: 70px;
  cursor: pointer;
  font-size: 12px;
  height: 70px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 4px;
  margin-bottom: 15px;
  opacity: 0.8;
  background-color: #2676d3;
}

.style_pops__2Z7BJ > :hover {
  opacity: 1;
}

.style_pops__2Z7BJ > :first-child {
  background-color: #2ba245;
}

.style_pops__2Z7BJ > :nth-child(2) {
  background-color: #605ab0;
}
.style_pops__2Z7BJ > :nth-child(3) {
  background-color: orange;
}
.style_pops__2Z7BJ > :nth-child(4) {
  background-color: green;
}
.ant-popover {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 10px;
  color: rgba(0, 0, 0, 0.85);
  font-size: 14px;
  font-variant: tabular-nums;
  line-height: 1.5715;
  list-style: none;
  -webkit-font-feature-settings: "tnum", "tnum";
  -moz-font-feature-settings: "tnum", "tnum";
  font-feature-settings: "tnum", "tnum";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1100;
  font-weight: 400;
  white-space: normal;
  text-align: left;
  cursor: auto;
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

.ant-popover:after {
  position: absolute;
  background: hsla(0, 0%, 100%, 0.01);
  content: "";
}

.ant-popover-placement-top,
.ant-popover-placement-topLeft,
.ant-popover-placement-topRight {
  padding-bottom: 10px;
}

.ant-popover-placement-right,
.ant-popover-placement-rightBottom,
.ant-popover-placement-rightTop {
  padding-left: 10px;
}

.ant-popover-placement-bottom,
.ant-popover-placement-bottomLeft,
.ant-popover-placement-bottomRight {
  padding-top: 10px;
}

.ant-popover-placement-left,
.ant-popover-placement-leftBottom,
.ant-popover-placement-leftTop {
  padding-right: 10px;
}

.ant-popover-inner {
  background-color: #fff;
  background-clip: padding-box;
  border-radius: 2px;
  -webkit-box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12),
    0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
  box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12),
    0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
  -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.15) \9;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15) \9;
}

@media (-ms-high-contrast: none), screen and (-ms-high-contrast: active) {
  .ant-popover-inner {
    -webkit-box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12),
      0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
    box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12),
      0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
  }
}

.ant-popover-title {
  min-width: 177px;
  min-height: 32px;
  margin: 0;
  padding: 5px 16px 4px;
  color: rgba(0, 0, 0, 0.85);
  font-weight: 500;
  border-bottom: 1px solid #f0f0f0;
}

.ant-popover-inner-content {
  padding: 12px 16px;
  color: rgba(0, 0, 0, 0.85);
}

.ant-popover-message {
  position: relative;
  padding: 4px 0 12px;
  color: rgba(0, 0, 0, 0.85);
  font-size: 14px;
}

.ant-popover-message > .anticon {
  position: absolute;
  top: 8.0005px;
  color: #faad14;
  font-size: 14px;
}

.ant-popover-message-title {
  padding-left: 22px;
}

.ant-popover-buttons {
  margin-bottom: 4px;
  text-align: right;
}

.ant-popover-buttons button {
  margin-left: 8px;
}

.ant-popover-arrow {
  position: absolute;
  display: block;
  width: 8.48528137px;
  height: 8.48528137px;
  overflow: hidden;
  background: transparent;
  pointer-events: none;
}

.ant-popover-arrow-content {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  width: 6px;
  height: 6px;
  margin: auto;
  background-color: #fff;
  content: "";
  pointer-events: auto;
}

.ant-popover-placement-top .ant-popover-arrow,
.ant-popover-placement-topLeft .ant-popover-arrow,
.ant-popover-placement-topRight .ant-popover-arrow {
  bottom: 1.51471863px;
}

.ant-popover-placement-top .ant-popover-arrow-content,
.ant-popover-placement-topLeft .ant-popover-arrow-content,
.ant-popover-placement-topRight .ant-popover-arrow-content {
  -webkit-box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.07);
  box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.07);
  -webkit-transform: translateY(-4.24264069px) rotate(45deg);
  transform: translateY(-4.24264069px) rotate(45deg);
}

.ant-popover-placement-top .ant-popover-arrow {
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

.ant-popover-placement-topLeft .ant-popover-arrow {
  left: 16px;
}

.ant-popover-placement-topRight .ant-popover-arrow {
  right: 16px;
}

.ant-popover-placement-right .ant-popover-arrow,
.ant-popover-placement-rightBottom .ant-popover-arrow,
.ant-popover-placement-rightTop .ant-popover-arrow {
  left: 1.51471863px;
}

.ant-popover-placement-right .ant-popover-arrow-content,
.ant-popover-placement-rightBottom .ant-popover-arrow-content,
.ant-popover-placement-rightTop .ant-popover-arrow-content {
  -webkit-box-shadow: -3px 3px 7px rgba(0, 0, 0, 0.07);
  box-shadow: -3px 3px 7px rgba(0, 0, 0, 0.07);
  -webkit-transform: translateX(4.24264069px) rotate(45deg);
  transform: translateX(4.24264069px) rotate(45deg);
}

.ant-popover-placement-right .ant-popover-arrow {
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.ant-popover-placement-rightTop .ant-popover-arrow {
  top: 12px;
}

.ant-popover-placement-rightBottom .ant-popover-arrow {
  bottom: 12px;
}

.ant-popover-placement-bottom .ant-popover-arrow,
.ant-popover-placement-bottomLeft .ant-popover-arrow,
.ant-popover-placement-bottomRight .ant-popover-arrow {
  top: 1.51471863px;
}

.ant-popover-placement-bottom .ant-popover-arrow-content,
.ant-popover-placement-bottomLeft .ant-popover-arrow-content,
.ant-popover-placement-bottomRight .ant-popover-arrow-content {
  -webkit-box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.06);
  box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.06);
  -webkit-transform: translateY(4.24264069px) rotate(45deg);
  transform: translateY(4.24264069px) rotate(45deg);
}

.ant-popover-placement-bottom .ant-popover-arrow {
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

.ant-popover-placement-bottomLeft .ant-popover-arrow {
  left: 16px;
}

.ant-popover-placement-bottomRight .ant-popover-arrow {
  right: 16px;
}

.ant-popover-placement-left .ant-popover-arrow,
.ant-popover-placement-leftBottom .ant-popover-arrow,
.ant-popover-placement-leftTop .ant-popover-arrow {
  right: 1.51471863px;
}

.ant-popover-placement-left .ant-popover-arrow-content,
.ant-popover-placement-leftBottom .ant-popover-arrow-content,
.ant-popover-placement-leftTop .ant-popover-arrow-content {
  -webkit-box-shadow: 3px -3px 7px rgba(0, 0, 0, 0.07);
  box-shadow: 3px -3px 7px rgba(0, 0, 0, 0.07);
  -webkit-transform: translateX(-4.24264069px) rotate(45deg);
  transform: translateX(-4.24264069px) rotate(45deg);
}

.ant-popover-placement-left .ant-popover-arrow {
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.ant-popover-placement-leftTop .ant-popover-arrow {
  top: 12px;
}

.ant-popover-placement-leftBottom .ant-popover-arrow {
  bottom: 12px;
}

.ant-popover-magenta .ant-popover-arrow-content,
.ant-popover-magenta .ant-popover-inner,
.ant-popover-pink .ant-popover-arrow-content,
.ant-popover-pink .ant-popover-inner {
  background-color: #eb2f96;
}

.ant-popover-red .ant-popover-arrow-content,
.ant-popover-red .ant-popover-inner {
  background-color: #f5222d;
}

.ant-popover-volcano .ant-popover-arrow-content,
.ant-popover-volcano .ant-popover-inner {
  background-color: #fa541c;
}

.ant-popover-orange .ant-popover-arrow-content,
.ant-popover-orange .ant-popover-inner {
  background-color: #fa8c16;
}

.ant-popover-yellow .ant-popover-arrow-content,
.ant-popover-yellow .ant-popover-inner {
  background-color: #fadb14;
}

.ant-popover-gold .ant-popover-arrow-content,
.ant-popover-gold .ant-popover-inner {
  background-color: #faad14;
}

.ant-popover-cyan .ant-popover-arrow-content,
.ant-popover-cyan .ant-popover-inner {
  background-color: #13c2c2;
}

.ant-popover-lime .ant-popover-arrow-content,
.ant-popover-lime .ant-popover-inner {
  background-color: #a0d911;
}

.ant-popover-green .ant-popover-arrow-content,
.ant-popover-green .ant-popover-inner {
  background-color: #52c41a;
}

.ant-popover-blue .ant-popover-arrow-content,
.ant-popover-blue .ant-popover-inner {
  background-color: #1890ff;
}

.ant-popover-geekblue .ant-popover-arrow-content,
.ant-popover-geekblue .ant-popover-inner {
  background-color: #2f54eb;
}

.ant-popover-purple .ant-popover-arrow-content,
.ant-popover-purple .ant-popover-inner {
  background-color: #722ed1;
}

.ant-popover-rtl {
  direction: rtl;
  text-align: right;
}

.ant-popover-rtl .ant-popover-message-title {
  padding-right: 22px;
  padding-left: 16px;
}

.ant-popover-rtl .ant-popover-buttons {
  text-align: left;
}

.ant-popover-rtl .ant-popover-buttons button {
  margin-right: 8px;
  margin-left: 0;
}
</style>
